use std::{collections::HashMap, fmt::format};

use crate::*;
use common::SubFutureInfo;
use leptos::leptos_dom::ev::SubmitEvent;
use leptos::logging;
use leptos::*;
use leptos_chart::*;
use serde::{Deserialize, Serialize};
use serde_json::*;
use tracing::{debug, error, info};
use wasm_bindgen::prelude::*;

/*
docs:
  https://docs.rs/leptos_chart/latest/leptos_chart/

Cargo.toml:
  leptos_chart = { version="0.3", features=["LineChart","default","ScatterChart", "LineChartGroup"] }

https://echarts.apache.org/examples/zh/index.html
download：https://github.com/apache/echarts/releases

*/


#[component]
pub fn MyChartPage() -> impl IntoView {

   let js_cdoe = r#"
var chartDom = document.getElementById('chart-id');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

console.log(option);
myChart.setOption(option);

"#;

    let js_view = view! {
        <script>{js_cdoe}</script>
    };

    let chart = Cartesian::new(
        Series::from(vec![1.0, 6.0, 9.]),
        Series::from(vec![1.0, 3.0, 5.]),
    )
    .set_view(640, 320, 3, 100, 100, 20);

    let color = Color::from("#ff0000");

    let chart2 = Cartesian::new(
        Series::from(vec![50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150]).set_range(40., 160.),
        Series::from(vec![7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15]).set_range(6., 16.),
    )
    .set_view(620, 320, 3, 100, 100, 20);

    let color2 = Color::from("#ff0000");

    let chart3 = CartesianGroup::new()
        .set_view(640, 320, 3, 50, 50, 20)
        .add_data(
            Series::from((vec!["1982", "1986", "2010", "2020"], "%Y", "year")),
            Series::from(vec![3., 2.0, 1., 4.]),
        )
        .add_data(
            Series::from((vec!["1982", "1986", "2017", "2020"], "%Y", "year")),
            Series::from(vec![0., 1.0, 2., 3.]),
        );

    let chart4 = CartesianGroup::new()
        .set_view(640, 320, 3, 50, 50, 10)
        .add_data(
            Series::from(vec!["A", "B", "C"]),
            Series::from(vec![0.7, 1.5, 1.9]),
        )
        .add_data(
            Series::from(vec!["A", "B", "C"]),
            Series::from(vec![0.3, 0.5, 0.9]),
        );

    let color4 = Color::from("#ff0000");
    let shift_degrees = 120.0;

    //let show = "hello,world";   
    view! {
        // color is option
        <div align="center">        
        <LineChart chart=chart color=color />
        <ScatterChart chart=chart2 color=color2 />
        <LineChartGroup chart=chart3 />
        <BarChartGroup chart=chart4 color=color4 shift_degrees=shift_degrees />
        </div>
        <div align="center" id="js_test">
        </div>
        <div align="center">
        <button on:click=move |_| {     
            js_sys::eval(" var fun=drawCanvasAgain; fun();").ok();            
          }> "js eval func"
          </button>
          <button on:click=move |_| {     
            js_sys::eval(" alert('hel')").ok();
          }> "show echart"
          </button>
        <canvas id="canvas-5" width="1200" height="400" style="border:1px solid #ccc" >
        </canvas>
        </div>
        <script src="public/canvas.js"  ></script>          
        <div id="chart-id" style="width: 600px;height:400px;" ></div>         
        {js_view}
   
    }
}

